<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<cl-add-btn v-text="addText" />
			<!-- 数据日期 -->
			<cl-filter label="入库日期">
				<cl-date-picker
					prop="data_date"
					type="date"
					:width="120"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					placeholder="请选择日期"
				/>
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="商品编号" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert">
			<template #slot-cost-params="{ scope }">
				<div class="cost-params">
					<el-row
						type="flex"
						style="width: 100%"
						align="center"
						v-for="(item, index) in scope.cost_params"
						:key="index"
					>
						<el-col :span="12">
							<!--【很重要】prop、rules 配置格式如下 -->
							<el-form-item
								:label="`类型${index + 1}`"
								:prop="`cost_params.${index}.type`"
								:rules="{
									message: `请选择费用参数类型${index + 1}`,
									required: true
								}"
							>
								<!-- 输入框 -->
								<el-input v-model="item.type" placeholder="请填写"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item
								:label="`数值${index + 1}`"
								:prop="`cost_params.${index}.cost`"
								:rules="{
									message: `请填写费用参数数值${index + 1}`,
									required: true
								}"
							>
								<div class="row">
									<!-- 输入框 -->
									<el-input-number v-model="item.cost" placeholder="请填写" />

									<!-- 删除行 -->
									<el-icon @click="rowDel(index)">
										<delete />
									</el-icon>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="end">
						<el-button @click="rowAdd()">添加费用参数</el-button>
					</el-row>
				</div>
			</template>
		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts" name="user-list" setup>
import { useCool } from "/@/cool";
import { onMounted } from "vue";
import { dayjs, ElMessage } from "element-plus";
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useDict } from "/$/dict";
import { Delete } from "@element-plus/icons-vue";

const { service } = useCool();
const Crud = useCrud({ service: service.dr.inventory }, (app) => {
	app.refresh();
});

const { dict } = useDict();
const addText = '录入库存'
// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "800px"
	},

	items: [
		{
			prop: "product_code",
			label: "商品编号",
			span: 24,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "weight",
			label: "重量",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "buying_price",
			label: "进货价",
			span: 12,
			required: true,
			component: {
				name: "el-input-number"
			}
		},
		{
			label: "打款金额",
			prop: "payment_amount",
			span: 12,
			required: true,
			component: {
				name: "el-input-number"
			}
		},
		{
			label: "箱规",
			prop: "box_gauge",
			span: 12,
			required: true,
			component: {
				name: "el-input-number"
			}
		},
		{
			label: "商品数量",
			prop: "product_quantity",
			span: 12,
			required: true,
			component: {
				name: "el-input-number"
			}
		},
		{
			label: "品牌方",
			prop: "brand_side",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			label: "供货方",
			prop: "supplier",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			label: "是否返利",
			prop: "whether_to_rebate",
			span: 12,
			required: true,
			component: {
				name: "cl-select"
			}
		},
		{
			label: "入库时间",
			prop: "warehousing_time",
			span: 12,
			required: true,
			value: dayjs().format("YYYY-MM-DD"),
			component: {
				name: "cl-date-picker",
				props: {
					type: "date",
					valueFormat: "YYYY-MM-DD"
				}
			}
		},

		{
			label: "返利比例",
			prop: "rebate_rate",
			span: 12,
			required: true,
			component: {
				name: "el-input-number"
			}
		},
		{
			label: "来源",
			prop: "source",
			span: 24,
			required: true,
			component: {
				name: "cl-select",
				props: {
					options: dict.get("inventory_source")
				}
			}
		},
		{
			prop: "cost_params",
			//【很重要】默认数据格式，以实际业务为主。
			value: [
				{
					label: ""
				}
			],
			component: {
				name: "slot-cost-params"
			}
		}
	],

	onSubmit(data, { next }) {
		next({
			...data,
			departmentIdList: data.departmentIdList || []
		});
	}
});
function rowAdd() {
	Upsert.value?.form.cost_params.push({
		label: ""
	});
}

function rowDel(index: number) {
	Upsert.value?.form.cost_params.splice(index, 1);
}

// cl-table
const Table = useTable({
	columns: [
		{
			type: "index",
			width: 60,
			fixed: "left"
		},
		{
			label: "商品编号",
			prop: "erp_order_number",
			minWidth: 120,
			fixed: "left"
		},
		{
			label: "重量",
			prop: "weight",
			minWidth: 80
		},
		{
			label: "进货价",
			prop: "buying_price",
			minWidth: 80
		},
		{
			label: "打款金额",
			prop: "payment_amount",
			minWidth: 100
		},
		{
			label: "箱规",
			prop: "box_gauge",
			minWidth: 80
		},
		{
			label: "商品数量",
			prop: "product_quantity",
			minWidth: 100
		},
		{
			label: "品牌方",
			prop: "brand_side",
			minWidth: 100
		},
		{
			label: "供货方",
			prop: "supplier",
			minWidth: 100
		},
		{
			label: "是否返利",
			prop: "whether_to_rebate",
			minWidth: 100
		},
		{
			label: "返利比例",
			prop: "rebate_rate",
			minWidth: 100
		},
		{
			label: "费用参数",
			prop: "cost_params",
			minWidth: 100
		},
		{
			label: "入库日期",
			prop: "warehousing_time",
			sortable: "desc",
			minWidth: 140,
			fixed: "right",
			formatter(row) {
				return row.data_date ? dayjs(row.data_date).format("YYYY-MM-DD") : "";
			}
		},
		{
			label: "来源",
			prop: "erp_order_number",
			minWidth: 80
		}
	]
});

// 刷新列表
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

onMounted(() => {
	refresh();
});
</script>

<style lang="scss" scoped>
.cost-params {
	:deep(.el-row) {
		height: 50px;
	}
	.row {
		display: flex;
		align-items: center;

		.el-input-number {
			flex: 1;
			margin-right: 10px;
		}

		.el-icon {
			font-size: 16px;
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}
}
</style>
